<template>
  <div>
     <!-- 面包屑导航 -->
   <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
      <el-breadcrumb-item>
        <i class="el-icon-tickets"></i> 
        订单管理
      </el-breadcrumb-item>
      <!-- 当前 -->
      <el-breadcrumb-item>订单概述</el-breadcrumb-item>
    </el-breadcrumb>
    <div id="all">
      <div class="all_div">
        <div class="mei_div">
          <header><h1>今日成交</h1> <h1>人均消费：30.00￥</h1></header>
          <div class="xiao_div">
            <div><p>成交量/交易量</p><p>3</p></div>
            <div><p>成交额/交易额</p><p>￥90.00</p></div>
          </div>
        </div>
        <div class="mei_div">
          <header><h1>昨日成交</h1> <h1>人均消费：30.00￥</h1></header>
          <div class="xiao_div">
            <div><p>成交量/交易量</p><p>3</p></div>
            <div><p>成交额/交易额</p><p>￥90.00</p></div>
          </div>
        </div>
      </div>
      <div class="all_div">
        <div class="mei_div">
          <header><h1>近7日成交</h1> <h1>人均消费：30.00￥</h1></header>
          <div class="xiao_div">
            <div><p>成交量/交易量</p><p>3</p></div>
            <div><p>成交额/交易额</p><p>￥90.00</p></div>
          </div>
        </div>
        <div class="mei_div">
          <header><h1>上月成交</h1> <h1>人均消费：30.00￥</h1></header>
          <div class="xiao_div">
            <div><p>成交量/交易量</p><p>3</p></div>
            <div><p>成交额/交易额</p><p>￥90.00</p></div>
          </div>
        </div>
      </div>
      
    </div>
    <div id="main" style="width: 100%; height: 400px"></div>
  </div>
</template>
<script>
export default{
  data(){
    return {
       drawChart() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的main对应
        let myChart = this.$echarts.init(document.getElementById("main"));
        // 指定图表的配置项和数据
        let option ={
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [150, 230, 224, 218, 135, 147, 260],
              type: 'line'
            }
          ]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
      },
    }
  },
  mounted() {
    this.drawChart();
    
  },
  methods:{

  }
}
</script>
<style scoped>
#all{
  width: 100%;
  height: 500px;
  margin: 20px auto;
  display: flex;
  justify-content: space-between;
}
header{
  width: 100%;
  display: flex;
  justify-content: space-between;
  background: #eeeeee;
  height: 60px;
  align-items: center;
}
.all_div{
  width:48%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mei_div{
  width: 100%;
  height: 48%;
  border: 1px #000 solid;
}
.xiao_div{
  width: 100%;
  height: 75%;
  display: flex;
}
.xiao_div div{
  width: 50%;
  height: 100%;
  text-align: center;
  padding-top:50px ;
  box-sizing: border-box;
}
</style>